var origX;
var origY;
var uniX;
var uniY;
var maxX;
var maxY;
var minX;
var minY;
var labelX;
var labelY;

function cargarGrafico(id){

    var data = document.getElementById(id);
    var div = document.getElementById("img_container");
    var divgrafico = document.createElement("div");

    var img 	= data.getAttribute("img");
    var height 	= data.getAttribute("height");
    var width 	= data.getAttribute("width");
    origX		= data.getAttribute("origenX");
    origY		= data.getAttribute("origenY");
    uniX		= data.getAttribute("unidadX");
    uniY		= data.getAttribute("unidadY");
    maxX		= Number(data.getAttribute("maximoX"));
    maxY		= Number(data.getAttribute("maximoY"));
    minX		= Number(data.getAttribute("minimoX"));
    minY		= Number(data.getAttribute("minimoY"));
    labelX		= data.getAttribute("labelX");
    labelY		= data.getAttribute("labelY");

    divgrafico.style.position = "absolute";
    divgrafico.style.top = "0px";
    divgrafico.style.left = "0px";
    divgrafico.style.backgroundPosition = "0px 0px";
    divgrafico.style.backgroundRepeat = "no-repeat";
    divgrafico.style.backgroundAttachment = "scroll";
    divgrafico.style.backgroundImage = "url("+img+")";
    divgrafico.style.width = width;
    divgrafico.style.height = height;
	
    div.appendChild(divgrafico);
}

function graficar(valorX, valorY, color){

	if(valorX < minX || valorX > maxX){
		alert("Error: "+labelX+" debe ser un valor entre "+minX+" y " +maxX);
		return;
	}
	
	if(valorY < minY || valorY > maxY){
		alert("Error: "+labelY+" debe tener un valor entre "+minY+" y " +maxY);
		return;
	}

	valorX = valorX - minX;
	valorY = valorY - minY;
	
	var div = document.createElement("div");
	
	div.style.height = "8px";
        div.style.fontSize = "1px";
        div.innerHTML = "&nbsp;";
	div.style.width = "8px";
	div.style.backgroundColor = color;
        div.style.padding = "0px 0px 0px 0px";
        div.style.margin = "0px 0px 0px 0px";
	
	div.style.position = "absolute";
	div.style.top = Number(origY) - (valorY * Number(uniY));
	div.style.left = Number(origX) + (valorX * Number(uniX)) - 8;
	
	document.getElementById("img_container").appendChild(div);

}
